import React, { Component } from 'react';
import axios from '../../requests/axios'
import utils from '../../util/utils'
import { Layout, Card, Breadcrumb, Menu } from 'antd';
import './首页.scss'
import { Route, Switch, Redirect } from 'react-router-dom'
import { twoLevel } from '../../router/index'
import { Link } from 'react-router-dom'
import mock from '../../router/mock'
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;

class shouye1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clientHeight: {
        'height': `${document.body.clientHeight - 170}px`
      },
      nvgHeight: {
        'height': `${document.body.clientHeight - 65}px`
      },
      primaryData: {},
      handleList: [],
      navigationSelect: "",//导航默认选中
      navigationOpen: ""//导航默认打卡
    }
  }

  componentDidMount() {
    this.identification()
    this.fullDetail()
    this.queryClientHeight()
  }

  render() {
    return (
      <div>
        <Layout>
          <Header>Header</Header>
          <Layout>
            <Sider>
              <div className="home_page_nvg scrollbar" style={this.state.nvgHeight}>
                <Menu
                  defaultSelectedKeys={['1']} //默认的
                  defaultOpenKeys={['1']}  //展开
                  // selectedKeys={['7']} //当前选中的
                  mode="inline"
                  theme="dark"
                  onSelect={this.routerHandle}
                >
                  <Menu.Item key="1">
                    <Link to="/shouye/jcym">集成页面</Link>
                  </Menu.Item>
                  <SubMenu key="2" title="通用-布局">
                    <Menu.Item key="3">
                      <Link to="/shouye/anniu">按钮</Link>
                    </Menu.Item>
                    <Menu.Item key="4">
                      <Link to="/shouye/buju">布局</Link>
                    </Menu.Item>
                  </SubMenu>
                  <SubMenu key="5" title="数据展示">
                    <Menu.Item key="6">
                      <Link to="/shouye/leibiaodan">类表单</Link>
                    </Menu.Item>
                    <Menu.Item key="7">
                      <Link to="/shouye/hsbd">函数表单</Link>
                    </Menu.Item>
                    <Menu.Item key="8">
                      <Link to="/shouye/lunbotu">轮播图</Link>
                    </Menu.Item>
                  </SubMenu>
                </Menu>
              </div>
            </Sider>
            <Content className='site-layout-background'>
              <div className="home_page_main">
                <Card title={
                  <Breadcrumb>
                    <Breadcrumb.Item>Home</Breadcrumb.Item>
                    <Breadcrumb.Item>
                      <Link to="">测试页面</Link>
                    </Breadcrumb.Item>
                  </Breadcrumb>
                } bordered={false}>
                  <div className="home_page_content scrollbar" style={this.state.clientHeight}>
                    <Switch>
                      {/* exact 细致匹配 */}
                      {
                        twoLevel.map((item, index) => {
                          if (item.exact) {
                            return <Route key={index} path={`${item.path}${item.parem ? item.parem : ''}`} component={item.component} exact></Route>
                          } else {
                            return <Route key={index} path={`${item.path}${item.parem ? item.parem : ''}`} component={item.component}></Route>
                          }
                        })
                      }
                      {/* Redirect 重定向 */}
                      <Redirect to="/shouye/jcym" from="/shouye"></Redirect>
                    </Switch>
                  </div>
                </Card>
                {/* Switch 匹配一次 */}

              </div>
            </Content>
          </Layout>
        </Layout>
      </div>
    );
  }

  //身份识别
  identification = (params) => {
    if (!utils.getStorage('session', 'login')) {
      this.props.history.push('/login')
    }
  }

  fullDetail = () => {
    axios.post('/antd/fullDetail').then(res => {
      if (res.result) {
        res.data.routeList = mock.routeList
        this.setState({
          primaryData: res.data
        }, () => {
          this.routerHandle(res.data)
        })
      }
      // console.log(res, 11111)
    })
  }

  queryClientHeight = () => {
    window.onresize = () => {
      this.setState({
        clientHeight: {
          'height': `${document.body.clientHeight - 170}px`
        },
        nvgHeight: {
          'height': `${document.body.clientHeight - 65}px`
        },
      })
    }
  }

  routerHandle = () => {
    // console.log(this.props.location)
    let list = []
    let handleData = []
    let pid = null
    let params = this.state.primaryData
    params.routeList.forEach(res => {
      list.push(res)
      if (res.children) {
        res.children.forEach(val => {
          list.push(val)
        })
      }
    })

    list.forEach(res => {
      if (res.path === this.props.location.pathname) {
        handleData.push(res)
        if (res.children) {
          pid = res.pid
        }
      }
    })

    if (pid) {
      list.forEach(res => {
        if (pid === res.id) {
          handleData.unshift(res)
        }
      })
    }
    // console.log(handleData)
    // console.log(list)
  }
}

export default shouye1;